<template>
	<view class="container">
		<view class="top">
			<image class="top-image" style="width: 300upx; height: 300upx; " src="../../static/invite.png"></image>
			<view class="fonts">
				<view class="font1">邀请即得</view>
				<view class="font2">{{invite.SPOINT}}{{invite.NAME}}</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<button class="submit" open-type="share" style="background-color: #E02E24;" >立即邀请</button>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<button class="submit" type="primary" @click="toggleSpec1" style="background-color: #E02E24;" >立即邀请</button>
			<!-- #endif -->
		</view>
		
		
		
		<view class="middle" @click="navToInviteDetail">
			<view class="left">
				<view >
					<text class="yticon  icon-tuandui"></text>
				</view>
				<view class="right">
					<view class="right1">成功邀请</view>
					<view class="right2">{{invite.COUNT}}人</view>
				</view>
			</view>
			<view class="left">
				<text class="yticon  icon-shouhoutuikuan"></text>
				<view class="right">
					<view class="right1">累计奖励</view>
					<view class="right2">{{invite.INVITESPOINT}}{{invite.NAME}}</view>
				</view>
			</view>
		</view>
		
		
		
		<!-- <view class="foot" >
			<view class="foot-top">分享排行榜</view>
			<view class="foot-main"  v-for="(item, index) in users" :key="item.id">
				<view v-if="index <4 "  >
					<view class="yticon icon-zuanshi" style="color:#ffd700 ; margin-left: 60upx;padding: 10upx;" v-if="index === 0"></view>
					<view class="yticon icon-zuanshi" style="color:rgb(233,233,216);margin-left: 60upx;padding: 10upx;" v-if="index === 1"></view>
					<view class="yticon icon-zuanshi" style="color:rgb(186,110,64);margin-left: 60upx;padding: 10upx;" v-if="index === 2"></view> -->
					<!-- <list-cell icon="yticon icon-zuanshi" iconColor="#ffd700" title=" " v-if="index === 0"></list-cell>
					<list-cell icon="yticon icon-zuanshi" iconColor="rgb(233,233,216)" title=" " v-if="index === 1"></list-cell>
					<list-cell icon="yticon icon-zuanshi" iconColor="rgb(186,110,64)" title=" " v-if="index === 2"></list-cell> -->
					<!-- <view class="three" v-if="index === 3">{{index+1}}</view>
				</view>
				<view class="four" v-else>{{index+1}}</view>
				
				<view>
					<image v-if="item.AVATOR" class="user-image" :src='img+item.AVATOR' mode="aspectFill"></image>
					<image v-else class="user-image" src='/static/missing-face.png'></image>
				</view>
				<view class="foot-a">
					<view>{{item.NAME}}</view>
					<view>{{item.PHONE}}</view>
				</view>
				<view class="foot-b">{{item.SPOINTSUM}}</view>
			</view>
			
		</view> -->
		<uni-popup  un="un" :show="type==='share'"  position="middle"  mode="fixed"   @hidePopup="togglePopup('')" :h5Top="h5top">
			<view style="position: absolute;top: -550upx;z-index: 1;right: -300upx;color: #FFFFFF;">
				<view class="iconfont icon-dianjiyoushangjiao" style="margin-left: 200upx;font-size: 120upx;"></view>
				<view style="font-size: 30upx;">点击右上角分享好友</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import listCell from '@/components/mix-list-cell';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	// #ifdef H5
	var jweixin = require('../../common/jweixin-1.4.0.js');
	// #endif
	export default{
		components: {
			listCell,
			uniPopup,
		},
		data(){
			return{
				users: [],
				specClass1: 'none',
				invite:'',
				id:'',
				img:'',
				type:'',
				h5top:true,
				invitedId:''
			}
		},
		onLoad(options){
			
			// #ifdef H5
			if(isWechat()){
				this.getCode();
			}
			//#endif
			
			if(options.invitedId){
				this.invitedId=options.invitedId
				if(uni.getStorageSync("SIGNATURE")){
					this.loadData(this.invitedId);
				}else{
					uni.request({
						url: getApp().globalData.http+'/common/regist', //仅为示例，并非真实接口地址。
						data: {
							BRAND : this.BRAND,
							MODEL : this.MODEL,
							OS : this.OS,
							OSVERSION: this.OSVERSION,
							SCREEN: this.SCREEN,
							RESOLUTION: this.RESOLUTION,
							MIDU: this.MIDU,
							UQID: this.UQID,
							OSID: this.OSID,
							TVERSION: this.TVERSION,
							TYPE: this.TYPE,//A.Android B.iPhone C.iPad
						},
						method:"POST",
						header: {
							'content-type':'application/x-www-form-urlencoded',
						},
						success: (res) => {
							uni.setStorageSync("SIGNATURE",res.data.OBJECT.SIGNATURE);
							this.loadData(this.invitedId);
						}
					});
				}
			}else{
				this.loadData();
			}
			
			if(uni.getStorageSync('userInfo')&&uni.getStorageSync('userInfo').USER&&uni.getStorageSync('userInfo').USER.ID){
				this.id = uni.getStorageSync('userInfo').USER.ID
			}
			this.img = getApp().globalData.imageAddress;
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods:{
			// #ifdef H5
			 //获取微信公众号code
			 getCode() {
				let appid = "wx0f9f6f7937087278"; //为测试号id
				let code = getUrlParam("code"); //是否存在code
				console.log(code);
				let local =window.location.href;
				if (code == null || code === "") {
					//不存在就打开上面的地址进行授权
					window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_base&state=1#wechat_redirect`;
				} else {
					console.log("已获取code",code)
				}
			 },
			 //#endif
			//请求数据
			async loadData(invitedId){
				this.$http.post("/user/queryinvite",{
					SIGNATURE : uni.getStorageSync("SIGNATURE"),
					TOKEN : uni.getStorageSync("userInfo").TOKEN,
				}).then((res)=>{
					console.log("*********",res);
					
					if(res.statusCode == 200 && res.data.STATE === '0'){
						this.users = res.data.OBJECT.LIST.slice(0,9)
						this.users.sort((a,b)=>b.SPOINTSUM - a.SPOINTSUM)
						this.invite = res.data.OBJECT
					}else if(res.data.STATE === "907" && res.statusCode === 200){
						//token已经失效  重新登录
						uni.removeStorageSync('userInfo')
						uni.showModal({
							content: '请重新登录',
							success: (res)=>{
								if(res.confirm){
									uni.reLaunch({
										url:'/pages/public/login1'
									})
								}else if(res.cancel) {
									
								}
							},
						})
					}else if(res.data.STATE === "906" && res.statusCode === 200){
						//正常退出失效
						//token已经失效  重新登录
						uni.removeStorageSync('userInfo')
						uni.reLaunch({
							url:'/pages/public/login1'
						})
						
					}else if(res.data.STATE === "905" && res.statusCode === 200){
						//别处登录失效
						uni.removeStorageSync('userInfo')
						uni.showModal({
							content: '已在别处登录',
							success: (res)=>{
								if(res.confirm){
									uni.reLaunch({
										url:'/pages/public/login1'
									})
								}else if(res.cancel) {
									uni.reLaunch({
										url:'/pages/public/login1'
									})
								}
							},
						})
					}else{
						uni.navigateTo({
							url:'/pages/reg/reg?userId='+invitedId
						})
					}
				}).catch((err)=>{
					console.log('request fail',err);
				})
				
			},
			
			toggleSpec1() {
				this.$http.post("/user/info",{
				SIGNATURE : uni.getStorageSync("SIGNATURE"),
				TOKEN: uni.getStorageSync('userInfo').TOKEN,
				}).then(res=>{
					if(res.data.STATE == '903'||res.data.STATE == '904'){
						uni.navigateTo({
						url:'/pages/public/login1'
						})
					}else if(res.data.STATE === "907" && res.statusCode === 200){
						//token已经失效  重新登录
						uni.removeStorageSync('userInfo')
						uni.showModal({
							content: '请重新登录',
							success: (res)=>{
								if(res.confirm){
									uni.reLaunch({
										url:'/pages/public/login1'
									})
								}else if(res.cancel) {
									
								}
							},
						})
					}else if(res.data.STATE === "906" && res.statusCode === 200){
						//正常退出失效
						//token已经失效  重新登录
						uni.removeStorageSync('userInfo')
						uni.reLaunch({
							url:'/pages/public/login1'
						})
						
					}else if(res.data.STATE === "905" && res.statusCode === 200){
						//别处登录失效
						uni.removeStorageSync('userInfo')
						uni.showModal({
							content: '已在别处登录',
							success: (res)=>{
								if(res.confirm){
									uni.reLaunch({
										url:'/pages/public/login1'
									})
								}else if(res.cancel) {
									uni.reLaunch({
										url:'/pages/public/login1'
									})
								}
							},
						})
					}
					
				}).catch(err =>{
					console.log('request fail', err);
				})
				// #ifdef H5
				if(isWechat()){
					publicShare2()
					this.type="share"
				}else{
					uni.navigateTo({
						url : '/pages/invite/createInvite/createInvite?id='+this.id
					})
				}
				
				// #endif
				// switch (e.type) {
				// 	case "share": //点击分享按钮
				//TODO 未处理h5，h5应调用qq浏览器等自带的share api，如果浏览器不自带share，那么分享图标不应该显示。或者从简的话，h5整个就不显示分享按钮
				// #ifdef APP-PLUS
				nvMask.show()
				nvImageMenu.show() //5+应支持从底部向上弹出的动画
				// #endif
				// break;
				// }
				},
				//跳转邀请明细
				navToInviteDetail(){
					this.$http.post("/user/info",{
						 SIGNATURE : uni.getStorageSync("SIGNATURE"),
						 TOKEN: uni.getStorageSync('userInfo').TOKEN,
					}).then(res=>{
						if(res.data.STATE == '903'||res.data.STATE == '904'){
							uni.navigateTo({
								url:'/pages/public/login1'
							})
						}
					}).catch(err =>{
					 console.log('request fail', err);
					})
					uni.navigateTo({
						url:'/pages/invite/inviteDetail/inviteDetail'
					})
				},
				togglePopup(type){
					this.type = type
					console.log(this.type)
				},
			},
			
			// #ifndef MP
			//点击导航栏 buttons 时触发
			onNavigationBarButtonTap() {
					// #ifdef APP-PLUS
					// const pages = getCurrentPages();
					// const page = pages[pages.length - 1];
					// const currentWebview = page.$getAppWebview();
					// currentWebview.hideTitleNViewButtonRedDot({
					// 	index
					// });
					// #endif
					uni.navigateTo({
						url: '/pages/inviteHelp/inviteHelp'
					})
			},
			// #endif
			// #ifdef MP
			//小程序分享
			onShareAppMessage(res){
				console.log("首页点击分享",res)
				
				return {
				      title: "亿拼惠",
				      path: '/pages/index/index?userId='+ this.id
				}
			},
			 // #endif
	}
	
	
	
	// #ifdef APP-PLUS
		// 如下为分享内容定义，可根据业务需求自行定义
		var strShareUrl = getApp().globalData.http+ "/h5/#/pages/reg/reg?userId=undefined"
		if(uni.getStorageSync('userInfo')&&uni.getStorageSync('userInfo').USER&&uni.getStorageSync('userInfo').USER.ID){
				strShareUrl = getApp().globalData.http+ "/h5/#/pages/reg/reg?userId="+uni.getStorageSync('userInfo').USER.ID
		}
		
		var strShareTitle = "亿拼惠"
		var strShareSummary = "团中团新模式，注册有礼..."
		var strShareImageUrl = "http://img.nczywc.cn/bg/logo1.png"
		
		//以下为计算菜单的nview绘制布局，为固定算法，使用者无关关心
		var screenWidth = plus.screen.resolutionWidth
		//以360px宽度屏幕为例，上下左右边距及2排按钮边距留25像素，图标宽度55像素，同行图标间的间距在360宽的屏幕是30px，但需要动态计算，以此原则计算4列图标分别的left位置
		//图标下的按钮文字距离图标5像素，文字大小12像素
		//底部取消按钮高度固定为44px
		//TODO 未处理横屏和pad，这些情况6个图标应该一排即可
		var margin = 25,
			iconWidth = 55,
			icontextSpace = 5,
			textHeight = 12
		var left1 = margin / 360 * screenWidth
		var iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距，再减去4个图标的宽度，就是3个同行图标的间距
		if (iconSpace <= 5) { //屏幕过窄时，缩小边距和图标大小，再算一次
			margin = 15
			iconWidth = 40
			left1 = margin / 360 * screenWidth
			iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距，再减去4个图标的宽度，就是3个同行图标的间距
		}
		var left2 = left1 + iconWidth + iconSpace
		var left3 = left1 + (iconWidth + iconSpace) * 2
		var left4 = left1 + (iconWidth + iconSpace) * 3
		var top1 = left1
		var top2 = top1 + iconWidth + icontextSpace + textHeight + left1
	// 	console.log("screenWidth: " + screenWidth + " ;height: " + plus.screen.resolutionHeight);
	// 	console.log("left1: " + left1);
	// 	console.log("iconSpace: " + iconSpace);
		var nvMask = new plus.nativeObj.View("nvMask", { //先创建遮罩层
			top: '0px',
			left: '0px',
			height: '100%',
			width: '100%',
			backgroundColor: 'rgba(0,0,0,0.2)'
		});
		nvMask.addEventListener("click", function() { //处理遮罩层点击
			nvMask.hide();
			nvImageMenu.hide();
		})
		var nvImageMenu = new plus.nativeObj.View("nvImageMenu", { //创建底部图标菜单
			bottom: '0px',
			left: '0px',
			height: '264px',
			width: '100%',
			backgroundColor: 'rgb(255,255,255)'
		});
		//绘制底部图标菜单的内容
		nvImageMenu.draw([
			{
				tag: 'rect',//菜单顶部的分割灰线
				color: '#e7e7e7',
				position: {
					top: '0px',
					height: '1px'
				}
			},
			{
				tag: 'font',
				id: 'sharecancel',//底部取消按钮的文字
				text: '取消分享',
				textStyles: {
					size: '14px'
				},
				position: {
					bottom: '0px',
					height: '44px'
				}
			},
			{
				tag: 'rect',//底部取消按钮的顶部边线
				color: '#e7e7e7',
				position: {
					bottom: '45px',
					height: '1px'
				}
			},
			{
				tag: 'img',
				id: 'imgwechatfriend',
				src: '/static/sharemenu/wechatfriend.png',
				position: {
					top: top1,
					left: left1,
					width: iconWidth,
					height: iconWidth
				}
			},
			{
				tag: 'font',
				id: 'fontwechatfriend',
				text: '微信好友',
				textStyles: {
					size: textHeight
				},
				position: {
					top: top1 + iconWidth + icontextSpace,
					left: left1,
					width: iconWidth,
					height: textHeight
				}
			},
			{
				tag: 'img',
				id: 'imgwechatmoments',
				src: '/static/sharemenu/wechatmoments.png',
				position: {
					top: top1,
					left: left2,
					width: iconWidth,
					height: iconWidth
				}
			},
			{
				tag: 'font',
				id: 'fontwechatmoments',
				text: '微信朋友圈',
				textStyles: {
					size: textHeight
				},
				position: {
					top: top1 + iconWidth + icontextSpace,
					left: left2 - 2.5,
					width: iconWidth + 5,
					height: textHeight
				}
			},
			// {
			// 	tag: 'img',
			// 	id: 'imgweibo',
			// 	src: '/static/sharemenu/weibo.png',
			// 	position: {
			// 		top: top1,
			// 		left: left3,
			// 		width: iconWidth,
			// 		height: iconWidth
			// 	}
			// },
			// {
			// 	tag: 'font',
			// 	id: 'fontweibo',
			// 	text: '微博',
			// 	textStyles: {
			// 		size: textHeight
			// 	},
			// 	position: {
			// 		top: top1 + iconWidth + icontextSpace,
			// 		left: left3,
			// 		width: iconWidth,
			// 		height: textHeight
			// 	}
			// },
			// {
			// 	tag: 'img',
			// 	id: 'imgqq',
			// 	src: '/static/sharemenu/qq.png',
			// 	position: {
			// 		top: top1,
			// 		left: left4,
			// 		width: iconWidth,
			// 		height: iconWidth
			// 	}
			// },
			// {
			// 	tag: 'font',
			// 	id: 'fontqq',
			// 	text: 'QQ',
			// 	textStyles: {
			// 		size: textHeight
			// 	},
			// 	position: {
			// 		top: top1 + iconWidth + icontextSpace,
			// 		left: left4,
			// 		width: iconWidth,
			// 		height: textHeight
			// 	}
			// },
			// {
			// 	tag: 'img',
			// 	id: 'imgcopyurl',
			// 	src: '/static/sharemenu/copyurl.png',
			// 	position: {
			// 		top: top2,
			// 		left: left1,
			// 		width: iconWidth,
			// 		height: iconWidth
			// 	}
			// },
			// {
			// 	tag: 'font',
			// 	id: 'fontcopyurl',
			// 	text: '复制',
			// 	textStyles: {
			// 		size: textHeight
			// 	},
			// 	position: {
			// 		top: top2 + iconWidth + icontextSpace,
			// 		left: left1,
			// 		width: iconWidth,
			// 		height: textHeight
			// 	}
			// },
			// {
			// 	tag: 'img',
			// 	id: 'imgmore',
			// 	src: '/static/sharemenu/more.png',
			// 	position: {
			// 		top: top2,
			// 		left: left2,
			// 		width: iconWidth,
			// 		height: iconWidth
			// 	}
			// },
			// {
			// 	tag: 'font',
			// 	id: 'fontmore',
			// 	text: '更多',
			// 	textStyles: {
			// 		size: textHeight
			// 	},
			// 	position: {
			// 		top: top2 + iconWidth + icontextSpace,
			// 		left: left2,
			// 		width: iconWidth,
			// 		height: textHeight
			// 	}
			// },
			//如果想要增加更多按钮，请在这里继续添加，第二列还有2个空位
		])
		nvImageMenu.addEventListener("click", function(e) { //处理底部图标菜单的点击事件，根据点击位置触发不同的逻辑
			// console.log("click menu"+JSON.stringify(e));
			if (e.screenY > plus.screen.resolutionHeight - 44) { //点击了底部取消按钮
				nvMask.hide();
				nvImageMenu.hide();
			} else if (e.clientX < 5 || e.clientX > screenWidth - 5 || e.clientY < 5) {
				//屏幕左右边缘5像素及菜单顶部5像素不处理点击
			} else { //点击了图标按钮
				var iClickIndex = -1 //点击的图标按钮序号，第一个图标按钮的index为0
				var iRow = e.clientY < (top2 - (left1 / 2)) ? 0 : 1
				var iCol = -1
				if (e.clientX < (left2 - (iconSpace / 2))) {
					iCol = 0
				} else if (e.clientX < (left3 - (iconSpace / 2))) {
					iCol = 1
				} else if (e.clientX < (left4 - (iconSpace / 2))) {
					iCol = 2
				} else {
					iCol = 3
				}
				if (iRow == 0) {
					iClickIndex = iCol
				} else {
					iClickIndex = iCol + 4
				}
				console.log("点击按钮的序号: " + iClickIndex);
				if (iClickIndex >= 0 && iClickIndex <= 5) { //处理具体的点击逻辑，此处也可以自行定义逻辑。如果增减了按钮，此处也需要跟着修改
					var strProvider="",strScene=""
					switch (iClickIndex) {
						case 0:
							strProvider = "weixin"
							strScene = "WXSceneSession"
							break;
						case 1:
							strProvider = "weixin"
							strScene = "WXSenceTimeline"
							break;
						// case 2:
						// 	strProvider = "sinaweibo"
						// 	break;
						// case 3:
						// 	strProvider = "qq"
						// 	break;
						// case 4:
						// 	uni.setClipboardData({
						// 		data: strShareUrl,
						// 		complete() {
						// 			uni.showToast({
						// 				title: "已复制到剪贴板"
						// 			})
						// 		}
						// 	})
						// 	break;
						// case 5:
						// 	plus.share.sendWithSystem({
						// 		content: strShareUrl,
						// 	})
						// 	break;
					}
					if (strProvider!="") { //点击了0-3序号的这4个按钮
						uni.share({
							provider: strProvider,
							scene:strScene,
							type: 0,
							href: strShareUrl,
							title: strShareTitle,
							summary: strShareSummary,
							imageUrl: strShareImageUrl,
							success: function(res) {
								console.log("success:" + JSON.stringify(res));
							},
							fail: function(err) {
								console.log("fail:" + JSON.stringify(err));
							}
						})
					}
				}
			}
		})
		/* nvImageMenu.addEventListener("touchstart", function(e) {
			if (e.screenY > (plus.screen.resolutionHeight - 44)) {
				//TODO 这里可以处理按下背景变灰的效果
			}
		})
		nvImageMenu.addEventListener("touchmove", function(e) {
			//TODO 这里可以处理按下背景变灰的效果
			if (e.screenY > plus.screen.resolutionHeight - 44) {}
		})
		nvImageMenu.addEventListener("touchend", function(e) {
			//TODO 这里可以处理释放背景恢复的效果
		})
		*/
		// #endif
		
		
		
		
		
		// #ifdef H5
		// 判断是否为公众号模拟器环境
		const isWechat = () => {
			return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
		}
		// 判断公众号截取code
		const getUrlParam = (name) => {
			let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			let r = window.location.search.substr(1).match(reg);
			if (r != null) {
				return unescape(r[2]);
			}
			return null;
		}
		//获取微信公众号的配置
		let publicShare2=()=>{
			console.log("进入方法未发送请求")
			uni.request({
				url: getApp().globalData.http+'/common/getConfig', //仅为示例，并非真实接口地址。
				data: {
					SIGNATURE : uni.getStorageSync('SIGNATURE'),
					URL:window.location.href,
				},
				header: {
					'content-type':'application/x-www-form-urlencoded',
				},
				success: (s) => {
					
					console.log('发送请求成功',s);
					jweixin.config({
						 debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						 appId: s.data.OBJECT.APPID, // 必填，公众号的唯一标识
						 timestamp: s.data.OBJECT.TIMESTAMP, // 必填，生成签名的时间戳
						 nonceStr: s.data.OBJECT.NONCESTR, // 必填，生成签名的随机串
						 signature: s.data.OBJECT.SIGNATURE, // 必填，签名，见附录1
						 jsApiList: ['updateAppMessageShareData','updateTimelineShareData']
					});	
					jweixin.ready(function(){
					// TODO
						console.log("进入jweixin.ready方法")
						
						var userid='undefined';
						if(uni.getStorageSync('userInfo')){
							userid=uni.getStorageSync('userInfo').USER.ID;
						}
						
						jweixin.updateAppMessageShareData({
							title: "亿拼惠", // 分享标题				 
							desc: "团中团新模式，注册有礼...", // 分享描述				 
							link: getApp().globalData.http+ "/h5/#/pages/reg/reg?userId="+userid, // 分享链接				 
							imgUrl: "http://img.nczywc.cn/bg/logo1.png", // 分享图标				 
							success: function () {},				 
						});	
						jweixin.updateTimelineShareData({
							title: "亿拼惠", // 分享标题				 
							desc: "团中团新模式，注册有礼...", // 分享描述				 
							link: getApp().globalData.http+ "/h5/#/pages/reg/reg?userId="+userid, // 分享链接				 
							imgUrl: "http://img.nczywc.cn/bg/logo1.png", // 分享图标				 
							success: function () {},
						});	
					})
				}
			})
		}
		//#endif
</script>

<style lang="scss">
	.container{
		margin: 10upx;
		background-color: #f5f5f5;
	}
	.top{
		border: 1upx solid #f5f5f5;
		padding-bottom: 70upx;
		background-color: #fff;
		margin-bottom: 20upx;
	}
	.top-image{
		margin-left: 210upx;
	}
	.font1{
		text-align: center;
		font-size: 30upx;
		color: #9D9D9D;
		// padding-left: 300upx;
	}
	.font2{
		text-align: center;
		font-size: 40upx;
		// padding-left: 220upx;
		padding-top: 10upx;
		padding-bottom: 50upx;
		color: #D1372C;
	}
	.submit{
		background-color: #E02E24;
		width: 80%;
		
	}
	.middle{
		display: flex;
		background-color: #fff;
		padding-top: 20upx;
		margin-bottom: 20upx;
		border: 1upx solid #f5f5f5;
		
	}
	.left{
		display: flex;
		margin: 30upx;
		margin-left: 60upx;
		padding-right: 50upx;
	} 
	.yticon{
		color: #D0D1FD;
		font-size: 60upx;
		padding-right: 30upx;
	}
	
	
	.right1{
		font-size: 30upx;
		
	}
	.right2{
		font-size: 20upx;
		color: #E02E24;
	}
	
	.foot{
		height: 100upx;
		background-color: #fff;
		padding-top: 20upx;
		border: 1upx solid #f5f5f5;
		font-size: 30upx;
	}
	.foot-main{
		display: flex;
		border-bottom: 1upx solid #EAEAED;
		padding: 10upx 0upx;
	}
	.foot-top{
		margin: 10upx;
		padding-left: 20upx;
		padding-bottom: 40upx;
		font-size: 30upx;
	}
	.three{
		font-size: 48upx;
		padding-right: 70upx;
		padding-left: 60upx;
		margin-top: 10upx;
		margin-left: 30upx;
		padding-bottom: 20upx;
	}
	.four{
		font-size: 48upx;
		padding-right: 70upx;
		margin-left: 30upx;
		margin-top: 20upx;
		margin-bottom: 10upx;
		padding-left: 60upx;
	}
	.ten{
		padding-left: -10upx;
	}
	.user-image{
		position: absolute;
		border: 1upx solid #eaeaed;
		border-radius: 100%;
		height: 80upx;
		width: 80upx;
		// margin: 20upx;
		left: 200upx;
	}
	.foot-a{
		position: absolute;
		left: 350upx;
		color: #9D9D9D;
	}
	.foot-b{
		position: absolute;
		padding-top: 20upx;
		
		right: 100upx;
		color: #9D9D9D;
	}
</style>
